<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档流</title>
    <style>
        div{
            background-color: #bfa;
        }
    </style>
</head>
<body>

    <!-- 
        文档流（normal flow）
            - 文档流就是网页中的位置，文档流就是网页的最基层
            - 我们所创建的元素默认都位于文档流中
            - 文档流中的元素会具有如下特点：
                块元素
                    1.块元素在文档流中自上向下垂直排列
                    2.块元素在文档流中默认宽度是父元素的全部
                    3.块元素在文档流中默认高度是被内容撑开

                行内元素
                    1.行内元素在文档流中自左向右水平排列
                        如果一行内不足以容纳所有的行内元素
                        则会另起一行，继续自左向右水平排列
                    2.行内元素在文档流中默认宽高都是被内容撑开

     -->

     <div>
         我是div
     </div>

     <div>
        我是div
    </div>

    <div>
        我是div
    </div>

    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    
</body>
</html>